<%@page import="my.db.DAO.ArticleDAO"%>
<%@page import="my.db.DTO.ArticleDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ include file="sites/frontHeader.jsp" %>
		</script>
	<%
		ArticleDAO artDAO = new ArticleDAO();
		String keyword = request.getParameter("keyword") == null ? "" : request.getParameter("keyword");
		
		int pages = request.getParameter("pages") == null ? 0 : Integer.parseInt(request.getParameter("pages"));
		int rows = Integer.parseInt(request.getParameter("rows"));
		int first = 1;
		int last = (int) Math.ceil((double) artDAO.countRows(keyword) / rows);
		
		String selected5 = null;
		String selected10 = null;
		String selected15 = null;	
		String user = (String) session.getAttribute("username"); 
	    String position = (String) session.getAttribute("position");
	%>
		<div class="r-body" >
			<div class="page-title">
				<p>Aritcle Management</p>
			</div>			 
			 <div class="in-main">
			 <div class="wrapper">
			 	<div class="site-left">
			 		<div class="left-box">
			 			<div class="box-title">Recently Add</div>
			 			<ul>
			 			<%
			 				ArrayList<ArticleDTO> list_recent=(ArrayList<ArticleDTO>)request.getAttribute("article_mostrecent");
			 				for(int i=0;i<list_recent.size();i++){
			 			%>
			 				<li><a href="./article_detail_index.article?articledetailid=<%=list_recent.get(i).getArticleNo()%>">
			 						<%=list_recent.get(i).getArticleTitle()%>
			 					</a>
			 				</li>
			 			<%} %>
			 			</ul>
			 		</div><!-- end left-box -->
			 		
			 		
			 		<div class="fb-like-box" data-href="https://www.facebook.com/pages/Article-Management-System/842186995792768?skip_nax_wizard=true&amp;ref_type=logout_gear" 
			 		data-width="234px" data-height="320px" data-colorscheme="light" data-show-faces="true" data-header="true" 
			 		data-stream="false" data-show-border="false" style="position:relative;bottom:-120px;left:-20px;border-bottom:1px solid #ccc;"></div>
			 	
			 		
			 	</div><!-- end site left -->
			 	
			 	<div class="site-right">
			 		<div class="left-div-top">
			 			<div class="site-left-top">
			 				<p class='box-p1'>More Reading More Knowdledge</p>
			 				<p class="box-p2">
			 					The scholars and the researcher pay many years to<br/> compile book,
			 					that contain more knoledge and their<br/> experience on books.
			 					so you can get it by reading.
			 					
			 				</p>
			 				<p class="box-p3">Please make reading to be your habbit</p>
			 			</div>
			 			<div class="site-right-top">
			 				<!-- 
			 				<img src="Image/book1.jpg">
			 				<img src="Image/book2.jpg">
			 				 -->
			 				 <ul>
			 				 	<li>Easy to search and find</li>
			 				 	<li>Written by famous writer</li>
			 				 	<li>Contain many kind of articles</li>
			 				 	<li>Special for learner and researcher</li>
			 				 </ul>
			 			</div>
			 			<div style="clear:both;"></div>
			 		</div><!-- end left-div-top -->
			 		
			 		
			 		
			 		<div class="site-right-data">
			 			<div class="index-search">
			 				<input type="button" value="Search Article" onclick="searchArticle()"/><input type="text" class="txt-search-article" name="txt_search_article" id="text-search"/>
			 				<img src="Image/search.png" class="img-search">
			 			</div>
			 			<div class="index-grid">
							<%
								ArrayList<ArticleDTO> list = (ArrayList<ArticleDTO>) request.getAttribute("article_list");
									for (int i = 0; i < list.size(); i++) {	
							%>
								<div class="book-item">
				 					<p><%=list.get(i).getArticleTitle()%></p>
				 					<img src="upload/<%=list.get(i).getArticleImage()%>"/><br/>
				 					<a href="./article_detail_index.article?articledetailid=<%=list.get(i).getArticleNo()%>">View Detail</a>
				 				</div>
							<%}%>
			 				
			 				<div style="clear:both;"></div>
			 			</div>
			 		</div><!-- end sit-right-data -->
			 		 <!-- These are pagination properties -->
            	
           				 <!-- Pagination List -->
           				 <div class="shadow_page">
					            <a class="last_p" href="PageLoad.article?rows=8&pages=1&keyword=<%=keyword%>">First</a>
					            <a class="next_p" href="PageLoad.article?rows=8&pages=<%=pages - 1 < 2 ? first : pages - 1%>&keyword=<%=keyword%>">Previous</a>
					            <%
						 			String style="style='color:red'";
						            for(int i=1; i<=last; i++){
						            	if (i==pages){
					            %>
					            	<a <%=style%> href="PageLoad.article?rows=<%=rows%>&pages=<%=i%>&keyword=<%=keyword%>"><%=i%></a>
				           		<%
				           			} else {
				           		%>
				           		<a href="PageLoad.article?rows=<%=rows%>&pages=<%=i%>&keyword=<%=keyword%>"><%=i%></a>		
				           		<%
				           			}
					            }%>
					            
					            <a class="prev" href="PageLoad.article?rows=8&pages=<%= pages + 1 > last ? last : pages + 1%>&keyword=<%=keyword%>">Next</a>
					            <a class="first" href="PageLoad.article?rows=8&pages=<%=last%>&keyword=<%=keyword%>">Last</a>
           				 </div>         
			 		
			 	</div><!-- end site right -->
			 	<div id="toggle" >
			 	<a href="https://www.facebook.com/pages/Article-Management-System/842186995792768?ref_type=bookmark" target="_blank">
			 		
			 	</a>		 		
			 	</div>					
			 	<div style="clear:both;"></div>
			 </div>
			 </div>
		</div><!-- end body -->
		<div class="r-footer">
	
		
		</div><!-- end footer -->
	</div><!-- end r-main -->
<div class="scroll-top-wrapper ">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>

</body>

<script type="text/javascript">
	
	function searchArticle(){
		alert("ddd");
		var key = document.getElementById("text-search").value;
		window.location.href="./PageLoad.article?rows=8&pages=1&keyword="+ key;
	}
</script>
	</body>
</html>

